<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>JSF-AJAX-Beispiel</title>
        <h:outputStylesheet library="css" name="styles.css"/>
    </h:head>
    <h:body>
        <h1>JSF-AJAX-Beispiel</h1>
        <h:form id="spielForm">

            <h:panelGrid  columns="1">
                <h:selectManyListbox id="upperItems" value="#{itemManager.upperSelected}" styleClass="itemlist">
                    <f:selectItems value="#{itemManager.upper}"/>
                </h:selectManyListbox>

                <h:panelGroup id="buttonGroup" styleClass="switchButtons">
                    <h:commandButton id="upButton" value="&uarr;" actionListener="#{itemManager.moveUp}" styleClass="switchButton">
                        <f:ajax execute="spielForm:upButton spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                    </h:commandButton>
                    <h:commandButton id="downButton" value="&darr;" actionListener="#{itemManager.moveDown}" styleClass="switchButton">
                        <f:ajax execute="spielForm:downButton spielForm:upperItems" render="spielForm:upperItems spielForm:lowerItems"/>
                    </h:commandButton>
                </h:panelGroup>

                <h:selectManyListbox id="lowerItems" value="#{itemManager.lowerSelected}" styleClass="itemlist">
                    <f:selectItems value="#{itemManager.lower}"/>
                </h:selectManyListbox>
                <h:panelGrid columns="2" width="100%" style="text-align: center">

                    <h:commandButton id="answer1button" value ="Löschen" actionListener="#{itemManager.deleteSelection}"   styleClass="switchButton2">
                        <f:ajax execute="spielForm:answer1button spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                    </h:commandButton>


                    <h:commandButton id="duplicate" value ="Duplizieren" actionListener="#{itemManager.duplicateName}"   styleClass="switchButton2">
                        <f:ajax execute="spielForm:duplicate spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                    </h:commandButton>
                </h:panelGrid>

                <h:panelGrid columns="2" width="100%" style="text-align: center">
                    <h:commandButton id="fillList" value ="Befüllen" actionListener="#{itemManager.fillList}"   styleClass="switchButton2">
                        <f:ajax execute="spielForm:fillList spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                    </h:commandButton>
                    <h:commandButton id="cleanList" value ="Leeren" actionListener="#{itemManager.cleanList}"   styleClass="switchButton2">
                        <f:ajax execute="spielForm:cleanList spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                    </h:commandButton>
                </h:panelGrid>
                <br/>Bitte Text eingeben!
                <h:panelGrid columns="2" width="100%" style="text-align: left">
                    <h:inputText id="name" value="#{itemManager.text}" style="height: 18px; width: 200px"
                                 required="true"
                                 requiredMessage="Bitte geben Sie Ihren Text ein."/>
                    <h:message for="name" style="color: red"/>
                </h:panelGrid>
                <h:commandButton id="paste" value ="Einfügen" actionListener="#{itemManager.pasteText}"  styleClass="switchButton3">
                    <f:ajax execute="spielForm:name spielForm:paste spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                </h:commandButton>
            </h:panelGrid>
        </h:form>
    </h:body>
</html>
